<template>
  <div class="cont">
    <div class="screen" ref="screen">
      <div class="top"><top></top></div>
      <div class="bottom">
        <div class="left">
          <tourist class="tourist"></tourist>
          <age class="age"></age>
          <sex class="sex"></sex>
        </div>
        <div class="center">
          <Map class="map"></Map>
          <Line class="line"></Line>
        </div>
        <div class="right">
          <rank class="rank"></rank>
          <year class="year"></year>
          <couter class="couter"></couter>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import top from "./compoents/top.vue";
import VScaleScreen from "v-scale-screen";
import { ref, onMounted } from "vue";
import tourist from "./compoents/tourist.vue";
import age from "./compoents/age.vue";
import sex from "./compoents/sex.vue";
import Map from "./compoents/map.vue";
import Line from "./compoents/line.vue";
import rank from "./compoents/rank.vue";
import year from "./compoents/year.vue";
import couter from "./compoents/couter.vue";

let screen = ref();
onMounted(() => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`;
});

function getScale(w = 1920, h = 1080) {
  const vw = window.innerWidth / w;
  const vh = window.innerHeight / h;

  console.log(vw, vh, window.innerWidth, window.innerHeight);

  return vw < vh ? vw : vh;
}

getScale();
</script>

<style scoped lang="scss">
.cont {
  width: 100vw;
  height: 100vh;
  background: url(./images/bg.png) no-repeat center / cover;
}
.screen {
  width: 1920px;
  height: 1080px;

  position: fixed;
  // background: red;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
}

.top {
  width: 100%;
  height: 40px;
  // background: cyan;
}
.bottom {
  display: flex;
  .right {
    flex: 1;
    display: flex;
    flex-direction: column;

    .rank {
      flex: 1.5;
    }
    .year {
      flex: 1;
    }
    .couter {
      flex: 1;
    }
  }
  .left {
    flex: 1;
    height: 1040px;
    display: flex;
    flex-direction: column;
    .tourist {
      flex: 1.2;
    }
    .age {
      flex: 1;
    }
    .sex {
      flex: 1;
    }
  }
  .center {
    flex: 2;
    display: flex;
    flex-direction: column;
    .map {
      flex: 4;
    }
    .line {
      flex: 1;
    }
  }
}
</style>
